<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head lang="zh-CN">
    <base href="<%=basePath%>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>e安全（人脸识别门禁）</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
		.round {
		   padding:5px;
		   border: 0px solid #dedede;
		   -moz-border-radius: 5px;      /* Gecko browsers */
		   -webkit-border-radius: 5px;   /* Webkit browsers */
		   border-radius:5px;            /* W3C syntax */
		}
		.round1 {
		   padding:10px; width:300px; height:50px;
		   border: 0px solid #dedede;
		   -moz-border-radius: 5px;      /* Gecko browsers */
		   -webkit-border-radius: 5px;   /* Webkit browsers */
		   border-radius:5px;            /* W3C syntax */
		}
		#imghead2{
    		width:20px; 
	        height:20px; 
	        border-radius:200px; 
    	}
    	#imghead3{
    		width:40px; 
	        height:40px; 
	        border-radius:200px; 
    	}
		.loadingWrap{  
		    position:fixed;  
		    top:0;  
		    left:0;  
		    width:100%;  
		    height:100%;  
		    z-index:300;  
		    background-image:url(csh/image/loading.gif);  
		    background-repeat:no-repeat;  
		    background-position:center center;  
		    background-color:#000;  
		    background-color:rgba(0,0,0,0.5);  
		    filter:alpha(opacity=50);  
		}  
  	</style>
	<script type="text/javascript" src="jquery/1.9.1/jquery.min.js"></script> 
	<script type="text/javascript" src="layer/2.4/layer.js"></script>
	<script type="text/javascript">
	function Determine(){
		var phone =/^[0-9]{3,30}$/;
		var cardnumber=document.getElementById("cardnumber").value;
		var s=document.getElementById("img").src;
		var src=s.substring(s.lastIndexOf("/")+1);
		if(!phone.test(cardnumber)){
			alert("请输入3至30数字卡号");
		}else if(src == ""){
			alert("图片不能为空");
		}else{
			var openid=document.getElementById("openid").value;
			var yphone=document.getElementById("mobile").value;
			var yid=document.getElementById("yid").value;
			$.ajax({
				url:"<%=path%>/card/buy",
				data:{
					moblie:openid,
					yphone:yphone,
					yid:yid
				},
				beforeSend:function(XMLHttpRequest){
 						document.getElementById("imghead3").style.display="block";
 						document.getElementById("button").style.display="none";
  				},
				success:function(data){
					var s=JSON.parse(data);
					if(s.code==0){
						if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){
							ios(s.content.colour_sn,'http://wwl.ycws.cc/h5/card/returned',openid,yphone); 	//苹果调用代码
						}else{
							android(s.content.colour_sn,'http://wwl.ycws.cc/h5/card/returned',openid,yphone);//android调用代码 
						}
					}else if(s.code==427){
						alert("商户订单号已经存在");
					}
				},
				fail:function(){
					alert("下单失败");
				}
			});
		}
	}
	function selectCard(){
		var phone =/^[0-9]{3,30}$/;
		var cardnumber=document.getElementById("cardnumber").value;
		var community_name=document.getElementById("community_name").value;
		if(!phone.test(cardnumber)){
			alert("请输入3至30数字卡号");
		}else{
			$.ajax({
				url:"<%=path%>/card/selectCard",
				type:"get",
				data:{
					cardnumber:cardnumber,
					community_name:community_name
				},
				beforeSend:function(XMLHttpRequest){
  					document.getElementById("imghead2").style.display="block";
	  			},
				success:function(data){
					document.getElementById("imghead2").style.display="none";
					var json=JSON.parse(data);
					console.log(json);
					if(json.list.length == 0){
						document.getElementById("img").src="";
						document.getElementById("img").style.display="none";
						document.getElementById("divCenter").innerHTML="您好,卡号不存在或者输入错误,请重新检查输入";
					}else if(json.list.length >= 2){
						document.getElementById("img").src="";
						document.getElementById("img").style.display="none";
						document.getElementById("divCenter").innerHTML="卡号重复绑定多个用户,请联系管理员处理";
					}else if(json.list[0].yname == ""){
						document.getElementById("img").src="";
						document.getElementById("img").style.display="none";
						document.getElementById("divCenter").innerHTML="您好,此卡号未绑定公众号,请在pad上扫脸,在通过显示出来的微信二维码进行信息绑定";
					}else{
						console.log("查询成功");
						document.getElementById("divCenter").innerHTML="";
						document.getElementById("img").style.display="block";
						document.getElementById("img").src=json.list[0].yfilename;
						document.getElementById("yid").value=json.list[0].yid;
					}
				},
				fail:function(){
					alert("请求异常,请重试");
				}
			});
		}
	}
</script>
	<script type="text/javascript">
	/* 2.JS调用ＩＯＳ代码
	 * 格式：*payFromHtml5*彩之云订单号*回调状态地址
	 * payFromHtml5,ios会自动识别
	 * @paramsn彩之云订单号
	 * @paramurl回调地址
	 * @return 
	 * 2015.5.6
	 */
		function ios(sn,url,openid,yphone){
			varurl="*payFromHtml5*"+sn+"*"+url+"?openid="+openid+"&yphone="+yphone;
			location.href=url;
			//或用iframe来访问：
			//<iframesrc=url></iframe>
		}
		/*
		 *注意：(对于ios)支付成功返回界面的时候，如果有先提示一个404报错，然后跳转到回调的地址页面，请使用下面的方法
		 */
		 function ios(sn,url,openid,yphone){
			loadURL("*payFromHtml5*"+sn+"*"+url+"?openid="+openid+"&yphone="+yphone);
		} 
	
		
		function loadURL(url) {
			 var iFrame;
			 iFrame = document.createElement("iframe");
			 iFrame.setAttribute("src", url);
			 iFrame.setAttribute("style", "display:none;");
			 iFrame.setAttribute("height", "0px");
			 iFrame.setAttribute("width", "0px");
			 iFrame.setAttribute("frameborder", "0");
			 document.body.appendChild(iFrame);
			 // 发起请求后这个iFrame就没用了，所以把它从dom上移除掉
			 iFrame.parentNode.removeChild(iFrame);
			 iFrame = null;
		}
	</script>
	<script type="text/javascript">
	/* 3.JS调用Android代码
	 * 格式：jsObject.payFromHtml(彩之云订单号，回调状态地址);
	 * jsObject.payFromHtml此方法是固定的方法名,安卓会自动识别
	 * @paramsn彩之云订单号
	 * @paramurl回调地址
	 * @return 
	 * 2015.5.6
	 */
		function android(sn,url,openid,yphone){
			jsObject.payFromHtml(sn,url+"?openid="+openid+"&yphone="+yphone);
		}
	</script>
</head>
  <body>
  	<div class="container-fluid">
      <div class="row">
     	<table width="100%" height="100%" >
     		<tr height="15%">
     			<td colspan="3" align="center"><img alt="" src="img/1204650566.jpg" style="width: 100%"></td>
     		</tr>
	     	<tr height="5%">
	     			<td colspan="3" align="center"></td>
	     	</tr>
     		<tr height="5%">
     			<td align="right" style="font-size: 12px; width: 20%">
     				 卡号输入
     			</td>
     			<td align="center" style="width: 60%;">
     				&nbsp;&nbsp;&nbsp;<input type="text" id="cardnumber" style="width: 80%;"/>&nbsp;&nbsp;&nbsp;
     			</td>
     			<td align="center" style="width: 20%;">
     				<input id="select" type="button" onclick="selectCard()"  value="查询" style="width: 70px; background-color: #49a1f2; color: white; font-size: 16px; display: block;" class="round">
     			</td>
     		</tr>
     		<tr height="2%" align="center">
     			<td colspan="3">
     				<img id="imghead2" src="http://wwl.ycws.cc/image/backgroundimage/2.gif" style="display: none;">
     			</td>
     		</tr>
     		<tr height="35%">
     		<td align="center">
     			</td>
     			<td align="center">
     				<div style="border: 1px solid gray; height: 60%; width: 80%; font-size: 12px; color: red;">
     					<span id="divCenter"></span>
     					<img alt="" id="img" src="" style="width: 100px; height: 100px; margin-top: 15px; display: none;">
     				</div>
     				<br>
     				<input type="button" id="button" onclick="Determine()" value="确定" class="round1" style="height: 50px;  width: 80%; background-color: #49a1f2; color: white; font-size: 16px; display: block;" > 
     				<img id="imghead3" src="http://wwl.ycws.cc/image/backgroundimage/2.gif" style="display: none;">
     			</td>
     		<td align="center">
     		</td>
     		</tr>
     		<tr height="38%">
     			<td align="center" colspan="3">
     				<div style="padding-left: 10%; padding-right: 10%;">
     				<font style="color: red; font-size: 14px;">
     					注意:请确认你的小区位置，如您在深圳花乡小区注册的，需要将彩之云的小区信息改为深圳花乡
     				</font></div>
     				<input type="hidden" name="openid" id="openid" value="${openid}"/><br>
     				<input type="hidden" name="mobile" id="mobile" value="${mobile}"/><br>
     				<input type="hidden" name="community_name" id="community_name" value="${community_name}"/><br>
     				<input type="hidden" name="yid" id="yid" value=""/><br>
     			</td>
     		</tr>
     	</table>
      </div>
    </div>
  </body>
</html>
